

<template>

  <div  style="height: 100%;width: 100%">
    <el-scrollbar  style="height: 100%;width: 100%">
      <div class="spo2-container">
        <h3 class="title">1. 血氧（SpO₂）监测</h3>

        <div class="card" :style="{ background: status.bg }">
          <div class="value">{{ spo2.toFixed(2) }}%</div>
          <div class="badge">{{ status.text }}</div>
          <div class="desc">本次测量血氧水平{{ status.text }}</div>
        </div>

        <div class="range-section">
          <div class="range-title">血氧浓度参考范围</div>
          <div class="range-bar">
            <div class="range normal">正常 ≥95%</div>
            <div class="range low">偏低 90%–94%</div>
            <div class="range danger">过低 &lt;90%</div>
          </div>
        </div>



      </div>
      <div class="container" >
        <div class="inner-container">
          <div class="section-header">
            <div class="title">分析意见</div>
            <el-button class="edit-button" @click="dynamicEdit">
              <font-awesome-icon :icon="['fas','fa-pencil-alt']" class="edit-icon"></font-awesome-icon>
              <el-text v-if="!editMode"  class="edit-text">编辑</el-text>
              <el-text v-if="editMode"  class="edit-text">保存</el-text>
            </el-button>
          </div>
          <div class="section-content">
            <div v-if="editMode" class="section-content-input">
              <el-input  type="textarea" class="input-area"  :rows="4" v-model="diagnosisData"></el-input>
            </div>
            <el-text v-else class="text-content">{{ diagnosisData }}</el-text>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>

</template>



<script setup>
import { ref, computed } from 'vue'
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import {getCopdReportData} from "@/api/copd/copdReport.js"
// 模拟血氧值，可以替换成接口数据
const spo2 = ref(95.97)

// 状态判断
const status = computed(() => {
  if (spo2.value >= 95) {
    return { text: '正常', color: '#52c41a', bg: 'linear-gradient(135deg,#b7eb8f,#52c41a)' }
  } else if (spo2.value >= 90) {
    return { text: '偏低', color: '#faad14', bg: 'linear-gradient(135deg,#ffe58f,#faad14)' }
  } else {
    return { text: '过低', color: '#f5222d', bg: 'linear-gradient(135deg,#ffa39e,#f5222d)' }
  }
})

const editMode=ref(false)
const diagnosisData=ref("")
const dynamicEdit = (index)=>{
  editMode.value = !editMode.value
  if (editMode.value === false){
    // updateEvaluation()
  }
}

const props = defineProps({
  currentReportId: Number, // 根据currentReportId的类型进行修改
  currentReport:Object
});

const oxygen=ref()
getCopdReportData(props.currentReportId).then(res => {
  let resData = res.data.data
  console.log('111',resData)
  // frequency = resData.frequency
  // oxygen.value = resData.bloodOxygen
  spo2.value=resData.bloodOxygen * 100
  // samplingData = resData.flowRates
  // heartRate=resData.heartRate

}).catch(err => {
  console.log(err)
  console.log("请稍后重试！", 1500)
});

</script>

<style scoped lang="scss">
.spo2-container {
  width: 100%;
  padding: 5px 10px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
  box-sizing: border-box;

  .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
  }

  .card {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 36px 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
  }

  .value {
    font-size: 48px;
    font-weight: bold;
    animation: pulse 2s infinite;
  }

  .badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
  }

  .desc {
    margin-top: 12px;
    font-size: 16px;
  }

  .range-section {
    margin-top: 28px;
  }

  .range-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .range-bar {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .range {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }

  .range.normal {
    background: #52c41a;
  }

  .range.low {
    background: #faad14;
  }

  .range.danger {
    background: #f5222d;
  }

  /* 呼吸动画 */
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.08);
    }
  }
}

.container {
  box-sizing: border-box;
  margin: 10px;
  margin-top: 18px;

  //width: 100%;
  min-height: 180px;
  background-color: #eff2f9;
  border-radius: 10px;
  .inner-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      height: 5%;
      margin-top: 2%;
    }

    .title {
      width: 20%;
      font-size: 15px;
      font-weight: bold;
      height: 100%;
      margin-left: 20px;
      align-items: center;
      display: flex;
    }

    .section {
      width: 100%;
    }

    .section-title {
      font-size: 16px;
      margin-left: 5%;
      font-weight: bold;
    }

    .section-header {
      width: 100%;
      display: flex;
      margin-top: 20px;
      justify-content: center;
      align-items: center;
    }

    .edit-button {
      margin-left: auto;
      background-color: #eff2f9;
      border: none;
    }

    .edit-icon {
      color: #3dd986;
      margin-left: 10px;
      margin-right: 10px;
      width: 20px;
      height: 20px;
    }

    .edit-text {
      font-size: 17px;
      color: #3dd986;
    }

    .section-content {
      width: 100%;
      display: flex;
      align-items: center;
    }
    .section-content-input{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .input-area {
      height: 100%;
      width: 95%;
    }

    .text-content {
      font-size: 16px;
      margin-left: 5%;
    }

    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      margin-bottom: 5vh;
    }
  }

}


</style>
